<template>
  <div>
    <el-row>
      <el-col>
        <el-button type="primary" @click="showEdit">发布</el-button>
      </el-col>
    </el-row>
    <Table :columns="columns"
           :showPagination="false"
           :dataSource="noticesData"
           :fetch="loadNoticesList"
           :options="{extHeight:20, border:true,}"
           @pageNoChange="handlePageNoChange"
           @rowSelected="handleRowSelected">
      <template #opration="{row}">
        <div class="opration">
          <a href="javascript:void(0)"
             class="a-link"
             @click="del(row)">删除</a>
        </div>
      </template>
    </Table>
    <noticesEdit ref="noticeEditRef" @callback="loadNoticesList"></noticesEdit>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue';
import noticesEdit from './noticesEdit.vue';

export default {
  components:{
    noticesEdit
  },
  data(){
    return{
      currentPage: 1,
      noticeEditRef: null,
      proxy: getCurrentInstance().proxy,
      columns:[
      {
        label: "公告标题",
        prop: "title",
      },{
        label: "公告内容",
        prop: "content",
        width:200,
      },{
        label: "发布时间",
        prop: "created",
        width:200,
      },{
        label: "操作",
        prop: "opration",
        width:200,
        scopedSlots: "opration",
      },],
      noticesData:{
        list:[]
      },
    }
  },
  methods: {
    //加载数据
    async loadNoticesList(){
      try {
        let result = await this.proxy.Request({
          url: "notices",
          method: "GET",
          params:{
            page:this.currentPage,
          }
        });

        if (!result){
          return;
        }
        this.noticesData.list = result.data.rows;
      } catch(error){
        console.error("获取公告数据时出错：",error)
      }
    },

    //发布公告
    showEdit(){
      this.noticeEditRef.init();
    },

    //删除公告
    // del(data) {
    //   this.proxy.Confirm('你确定要删除该公告吗？');
    //   console.log(data.id);
    // },
    del(data) {
      this.proxy.Confirm('你确定要删除该公告吗?', async() => {
        let result = await this.proxy.Request({
          url: '/notices/delete/'+data.id,
          method: "DELETE",
        })
        if (!result) {
          return;
        }
        this.loadNoticesList();
      })
    },
  },
  mounted(){
    this.loadNoticesList();
    this.noticeEditRef = this.$refs.noticeEditRef;
  }
}
</script>

<style>

</style>